<template>
  <div class="com-container">
    <div ref="sellerRef" class="com-chart" />
  </div>
</template>
<script>
import {
    defineComponent,
    getCurrentInstance,
    ref,
    onMounted,
    onUnmounted
} from '@vue/runtime-core'
import { getSellerData } from '@/api/seller'
export default defineComponent({
    props: {
        currentPage: {
            type: Number,
            default: 1
        }
    },
    setup(props, contxt) {
        const { proxy } = getCurrentInstance()
        let { currentPage } = props
        const { $echarts } = proxy
        const sellerRef = ref(null)
        let initChartInstance = null
        let timer = null
        let chartData = []
        let totalPage = 1
        onMounted(async() => {
            // console.log('dom对象', sellerRef.value)
            initChart()
            getData()
            window.addEventListener('resize', screenAdapter)
            screenAdapter()
        })
        const screenAdapter = () => {
            console.log(sellerRef.value.offsetWidth)
            const { offsetWidth } = sellerRef.value
            const titleFontSize = offsetWidth / 100 * 3.6
            const adapterOption = {
                title: {
                    textStyle: {
                        fonSize: titleFontSize
                    }
                },
                tooltip: {
                    axisPointer: {
                        lineStyle: {
                            width: titleFontSize
                        }
                    }
                },
                series: [
                    {
                        barWidth: titleFontSize,
                        itemStyle: {
                            barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
                        }
                    }
                ]
            }
            initChartInstance.setOption(adapterOption)
            initChartInstance.resize()
        }
        const initChart = () => {
            initChartInstance = $echarts.init(sellerRef.value)
            const initOption = {
                title: {
                    text: '▍商家销量统计',
                    textStyle: {
                        fonSize: 16
                    }
                },
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '6%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        z: 0,
                        lineStyle: {
                            width: 66,
                            color: '#2D3443'
                        }
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 66,
                        label: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                color: 'black'
                            }
                        },
                        itemStyle: {
                            barBorderRadius: [0, 33, 33, 0],
                            color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#5052EE'
                                },
                                {
                                    offset: 1,
                                    color: '#AB6EE5'
                                }

                            ])
                        }
                    }
                ]
            }
            // 初始化option、数据option、分辨率adapterOption
            initChartInstance.setOption(initOption)
            initChartInstance.on('mouseover', () => {
                clearInterval(timer)
            })
            initChartInstance.on('mouseout', () => {
                startInterval()
            })
        }
        onUnmounted(() => {
            clearInterval(timer)
            window.removeEventListener('resize')
        })
        const startInterval = () => {
            timer = setInterval(() => {
                currentPage++
                if (currentPage > totalPage) {
                    currentPage = 1
                }
                updateChart(chartData, totalPage)
            }, 3000)
        }
        const getData = async() => {
            const { data = [] } = await getSellerData()
            chartData = data
            data.sort((a, b) => a.value - b.value)
            totalPage = data.length % 5 === 0 ? data.length / 5 : data.length + 1
            updateChart(data, totalPage)
            startInterval(totalPage)
        }
        const updateChart = (res, totalPage) => {
            const start = (currentPage - 1) * 5
            const end = currentPage * 5
            const data = res.slice(start, end)
            const sellerName = data.map((item) => item.name)
            const sellerValue = data.map((item) => item.value)
            const dataOption = {
                yAxis: {
                    data: sellerName
                },
                series: [
                    { data: sellerValue }
                ]
            }
            initChartInstance.setOption(dataOption)
        }

        return {
            initChartInstance,
            sellerRef
        }
    }
})
</script>
<style lang="scss">
.com-chart {
  width: 100%;
  height: 100%;
}
</style>
